import { Component, OnInit } from '@angular/core';
import { opusimgagesUrl, opususeUrl } from '../../../urlConfig';
import { LocalStorageService } from '../../../service/localStorageService/local-storage.service';
import { HttpService } from '../../../service/httpService/http.service';
import { TokenService } from '../../../service/tokenService/token.service';
import { Router } from '@angular/router';
@Component({
  selector: 'app-tinymce',
  templateUrl: './tinymce.component.html',
  styleUrls: ['./tinymce.component.styl']
})
export class TinymceComponent implements OnInit {
  public editorInitConfig: any;
  token: any = this.localStorage.getItem('token');
  constructor(public localStorage: LocalStorageService, public http: HttpService, public tokens: TokenService, public router: Router) { }
  ngOnInit() {

    this.editorInitConfig = {
      theme_url: '/assets/tinymce/themes/silver/theme.min.js', // 主题
      skin_url: '/assets/tinymce/skins/ui/oxide', // 皮肤
      language: 'zh_CN', // 汉化
      min_height: 700,
      // icons: 'material',
      // toolbar: 'undo redo | image code', // 工具栏
      plugins: 'print preview code fullpage searchreplace autolink directionality visualblocks visualchars fullscreen image link template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists wordcount imagetools textpattern help autosave', // media 多媒体  advcode powerpaste mediaembed tinymcespellchecker a11ychecker formatpainter permanentpen pageembed tinycomments mentions linkchecker save
      toolbar: ' undo redo | formatselect | bold italic strikethrough forecolor backcolor permanentpen formatpainter | link image  pageembed | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent | removeformat | addcomment restoredraft', // media  多媒体
      autosave_ask_before_unload: true, // 关闭当前窗口时会自动保存内容 ， 默认为true
      autosave_restore_when_empty: true, // 使用此选项可以指定当编辑器在初始化时为空时，TinyMCE是否应自动恢复存储在本地存储中的内容。
      autosave_retention: "2880m", // 将内容保存到本地2880分钟，2880分钟后自动清除内容 
      autosave_interval: "10s", // 20s保存一次本地
      images_upload_handler: (blobInfo, success, failure) => { // 本地图片上传

        var xhr, formData;
        xhr = new XMLHttpRequest();
        xhr.withCredentials = false;
        xhr.open('POST', opusimgagesUrl); // 上传图片

        // xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.onload = async () => {
          var json;
          if (xhr.status != 200) {
            failure('HTTP Error: ' + xhr.status);
            return;
          }
          json = JSON.parse(xhr.responseText);

          if (!json || typeof json.data.filename != 'string') {
            failure('Invalid JSON: ' + xhr.responseText);
            return;
          }
          success(opususeUrl + json.data.filename);  // 返回上传后图片的浏览地址
        };

        formData = new FormData();
        formData.append('file', blobInfo.blob(), blobInfo.filename());
        formData.append('accessToken', `${this.token.accessToken}`);
        xhr.send(formData);



      },
      init_instance_callback: (editor) => { // 时时监听本文内容的变化
        editor.on('PostProcess', (e) => {
          
        });
      }
    };
  }
}
